<template>
  <div class="container" style="width: 1500px" >
    <div class="affix">
      <a-affix offset-top="10">
        <a-button type="primary" style="background-color: #2e75b6;font-size: 16px;font-weight: bold">
          <MenuOutlined />Navigation
        </a-button>
        <div>
              <a-anchor
                  :target-offset="targetOffset"
                  :get-current-anchor="currtent_anchor"
                  :wrapperStyle="{ textDecorationLine:'none'}"
                  :affix="true"
                  :items="state.items"
              >
              </a-anchor>
        </div>
      </a-affix>
    </div>
<!--    <div style="margin-bottom: 10px" align="right">-->
<!--       <a-button type="primary" @click="exportData">-->
<!--              Download all paths-->
<!--       </a-button>-->
<!--    </div>-->
    <div>
      <a-collapse v-model:activeKey="activeKey">
        <a-collapse-panel
            id="Task"
            :show-arrow="false"
            style="border:solid black 1px;backgroundColor: #2e75b6"
            key="4">
          <template #header>
            <div class="title">
              <span>Task setting</span>
            </div>
          </template>
<!--          描述列表-->
          <a-descriptions :column="1" :label-style="{fontWeight:'bold',fontSize: '16px'}" :content-style="{fontSize: '16px'}">
            <a-descriptions-item label="Task ID">
              <span id="taskid">{{taskid}}</span>
              <a-tag type="button"  style="color: black;margin-left: 1vw" color="orange" @click="Copy">Copy</a-tag>
            </a-descriptions-item>
            <!--2-->
            <a-descriptions-item label="Knowledge graph">{{param.graphValue}}</a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="2" :label-style="{fontWeight:'bold',fontSize: '16px'}" :content-style="{fontSize: '16px'}">
<!--3-->
            <a-descriptions-item label="Source node type">{{param.Source_Type}}</a-descriptions-item>
            <a-descriptions-item label="Source node name">{{ param.Source_Node }}</a-descriptions-item>
<!--4-->
            <a-descriptions-item label="Target node type">{{param.Target_Type}}</a-descriptions-item>
            <a-descriptions-item label="Target node name">{{param.Target_Node}}</a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>
        <br>
        <a-collapse-panel
            id="Metapaths"
            :show-arrow="false"
            style="border:solid black 1px;backgroundColor: #2e75b6"
            key="1">
          <template #header>
            <div class="title">
              <span>
                Meta-paths
                <a-tooltip
                    color="#ffffff"
                    :overlay-inner-style="{color: '#ed7d31'}"
                    placement="rightTop">
                    <template #title>
                      <span>The meta-path summarizes several paths with common node and relation types. Each meta-path starts with the user-chosen source node and ends with the user-chosen target node but differs in their node/relation types. Once the user selects one of the meta-paths, all paths contained in this meta-path will be displayed in the following ‘Paths’ panel.</span>
                    </template>
                    <QuestionCircleTwoTone />
                  <!--                  <button>dadw</button>-->
                </a-tooltip>
              </span>
            </div>
          </template>
          <a-row style="margin-bottom: 16px">
            <a-col :span="12" align="left">
<!--              <a-button type="primary" :disabled="!hasSelected1" :loading="metadatasource.load" @click="start1">-->
<!--                Reload-->
<!--              </a-button>-->
              <span style="margin-left: 8px">
            <template v-if="hasSelected1">
              {{ `Selected ${state.selectedMetaRowKeys.length} items` }}
            </template>
            </span>
            </a-col>

          </a-row>
          <a-table
              :dataSource="metadatasource.data"
              :columns="metadatasource.columns"
              :loading="metadatasource.load"
              :row-selection="rowSelectionMeta"
              :pagination="pagination1"
              @change="page1"
              row-key="Meta_path"
          >
            <template #headerCell="{column}">
              <template v-if="column.dataIndex=='Meta_path'">
                <a-row style="margin-top: 5px">
                  <a-col :span="10">
                    Meta-path
                  </a-col>
                  <a-col :span="4">
<!--                    <a-input-search-->
<!--                        v-model:value="metadatasource.searchValue"-->
<!--                        placeholder="input search text"-->
<!--                        style="width: 200px"-->
<!--                        @search="Onsearch_metapath"-->
<!--                    ></a-input-search>-->
                  </a-col>
                </a-row>
              </template>
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex == 'Meta_path'">
                <template v-if="record.Meta_path.split('-').length =='3'">>
                  <a-tag :color="record.Meta_path.split('-')[0]=='Compound'?'#33a02c':(record.Meta_path.split('-')[0]=='Gene'?'#80b1d3':'#d6604d')">{{ record.Meta_path.split('-')[0] }}</a-tag>
                  <span>
                    ————————————
                  <span class="test1">{{ record.Meta_path.split('-')[1] }}</span>
                  </span>
                  <a-tag :color="record.Meta_path.split('-')[2]=='Compound'?'#33a02c':(record.Meta_path.split('-')[2]=='Gene'?'#80b1d3':'#d6604d')">{{ record.Meta_path.split('-')[2] }}</a-tag>
                </template>
                <template v-if="record.Meta_path.split('-').length =='5'">
                  <a-tag :color="record.Meta_path.split('-')[0]=='Compound'?'#33a02c':(record.Meta_path.split('-')[0]=='Gene'?'#80b1d3':'#d6604d')">{{ record.Meta_path.split('-')[0] }}</a-tag>
                  <span>
                    ————————————
                  <span class="test1">{{ record.Meta_path.split('-')[1] }}</span>
                  </span>
                  <a-tag :color="record.Meta_path.split('-')[2]=='Compound'?'#33a02c':(record.Meta_path.split('-')[2]=='Gene'?'#80b1d3':'#d6604d')">{{ record.Meta_path.split('-')[2] }}</a-tag>
                  <span>
                    ————————————
                    <span class="test1">{{ record.Meta_path.split('-')[3] }}</span>
                  </span>
                  <a-tag :color="record.Meta_path.split('-')[4]=='Compound'?'#33a02c':(record.Meta_path.split('-')[4]=='Gene'?'#80b1d3':'#d6604d')">{{ record.Meta_path.split('-')[4] }}</a-tag>
                </template>
                <template v-if="record.Meta_path.split('-').length =='7'">
                  <a-tag :color="record.Meta_path.split('-')[0]=='Compound'?'#33a02c':(record.Meta_path.split('-')[0]=='Gene'?'#80b1d3':'#d6604d')">{{ record.Meta_path.split('-')[0] }}</a-tag>
                  <span>
                    ————————————
                  <span class="test1">{{ record.Meta_path.split('-')[1] }}</span>
                  </span>
                  <a-tag :color="record.Meta_path.split('-')[2]=='Compound'?'#33a02c':(record.Meta_path.split('-')[2]=='Gene'?'#80b1d3':'#d6604d')">{{ record.Meta_path.split('-')[2] }}</a-tag>
                  <span>
                    ————————————
                    <span class="test1">{{ record.Meta_path.split('-')[3] }}</span>
                  </span>
                  <a-tag :color="record.Meta_path.split('-')[4]=='Compound'?'#33a02c':(record.Meta_path.split('-')[4]=='Gene'?'#80b1d3':'#d6604d')">{{ record.Meta_path.split('-')[4] }}</a-tag>
                  <span>
                    ————————————
                    <span class="test1">{{ record.Meta_path.split('-')[5] }}</span>
                  </span>
                  <a-tag :color="record.Meta_path.split('-')[6]=='Compound'?'#33a02c':(record.Meta_path.split('-')[6]=='Gene'?'#80b1d3':'#d6604d')">{{ record.Meta_path.split('-')[6] }}</a-tag>
                </template>
              </template>
            </template>
          </a-table>
          <div class="footer">
            <a-row>
              <a-col :span="12" align="left">
                <a-input-search
                    v-model:value="metadatasource.searchValue"
                    placeholder="input search text"
                    style="width: 200px"
                    @search="Onsearch_metapath"
                ></a-input-search>
              </a-col>
              <a-col :span="12" align="left">
                <a-button  @click="exportMetaData">
                  <template #icon>
                    <DownloadOutlined />
                  </template>
                  Download tables
                </a-button>
              </a-col>
            </a-row>
          </div>
        </a-collapse-panel>
        <br>
        <a-collapse-panel
            id="Paths"
            :show-arrow="false"
            style="border:solid black 1px;backgroundColor: #2e75b6"
            key="2">
          <template #header>
            <div class="title">
              <span>
                Paths
                 <a-tooltip
                     color="#ffffff"
                     :overlay-inner-style="{color: '#ed7d31'}"
                     placement="rightTop">
                    <template #title>
                      <span>Once the user selects one of the paths, the path will be visualized in the following ‘Graph’ panel.</span>
                    </template>
                    <QuestionCircleTwoTone />
                   <!--                  <button>dadw</button>-->
                </a-tooltip>
              </span>
            </div>
          </template>
          <div style="margin-bottom: 16px" align="left">
<!--            <a-button type="primary" :disabled="!hasSelected2" :loading="pathdatasource.load" @click="start2">-->
<!--              Reload-->
<!--            </a-button>-->
            <span style="margin-left: 8px">
            <template v-if="hasSelected2">
              {{ `Selected ${state.selectedPathRowKeys.length} items` }}
            </template>
          </span>
          </div>
          <a-table
              :dataSource="pathdatasource.data"
              :columns="pathdatasource.columns"
              :loading="pathdatasource.load"
              :row-selection="rowSelectionPath"
              row-key="path"
              :pagination="pagination2"
              @change="page2"
          >
            <template #headerCell="{column}">
              <template v-if="column.dataIndex=='path'">
                <a-row style="margin-top: 5px">
                  <a-col :span="10">
                    path
                  </a-col>
                  <a-col :span="14">
<!--                      <a-input-search-->
<!--                          v-model:value="pathdatasource.searchValue"-->
<!--                          placeholder="input search text"-->
<!--                          style="width: 200px"-->
<!--                          @search="Onsearch"-->
<!--                      ></a-input-search>-->
                  </a-col>
                </a-row>
              </template>
              <template v-if="column.dataIndex == 'PG_score'">
                Average degree
                <a-tooltip
                    color="#ffffff"
                    :overlay-inner-style="{color: '#ed7d31'}"
                    placement="rightTop">
                  <template #title>
                    <span>The average degree of the path is calculated by averaging the degrees of all entities in the user-chosen knowledge graph. The higher the average degree, the more prior knowledge about the path.</span>
                  </template>
                  <QuestionCircleTwoTone />
                  <!--                  <button>dadw</button>-->
                </a-tooltip>
              </template>
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex == 'meta_path'">
                <template v-if="record.meta_path.split('-').length =='3'">
                  <a-tag :color="record.meta_path.split('-')[0]=='Compound'?'#33a02c':(record.meta_path.split('-')[0]=='Gene'?'#80b1d3':'#d6604d')">{{ record.meta_path.split('-')[0] }}</a-tag>-
                  <a-tag :color="record.meta_path.split('-')[2]=='Compound'?'#33a02c':(record.meta_path.split('-')[2]=='Gene'?'#80b1d3':'#d6604d')">{{ record.meta_path.split('-')[2] }}</a-tag>
                </template>
                <template v-if="record.meta_path.split('-').length =='5'">
                  <a-tag :color="record.meta_path.split('-')[0]=='Compound'?'#33a02c':(record.meta_path.split('-')[0]=='Gene'?'#80b1d3':'#d6604d')">{{ record.meta_path.split('-')[0] }}</a-tag>-
                  <a-tag :color="record.meta_path.split('-')[2]=='Compound'?'#33a02c':(record.meta_path.split('-')[2]=='Gene'?'#80b1d3':'#d6604d')">{{ record.meta_path.split('-')[2] }}</a-tag>-
                  <a-tag :color="record.meta_path.split('-')[4]=='Compound'?'#33a02c':(record.meta_path.split('-')[4]=='Gene'?'#80b1d3':'#d6604d')">{{ record.meta_path.split('-')[4] }}</a-tag>
                </template>
                <template v-if="record.meta_path.split('-').length =='7'">
                  <a-tag :color="record.meta_path.split('-')[0]=='Compound'?'#33a02c':(record.meta_path.split('-')[0]=='Gene'?'#80b1d3':'#d6604d')">{{ record.meta_path.split('-')[0] }}</a-tag>-
                  <a-tag :color="record.meta_path.split('-')[2]=='Compound'?'#33a02c':(record.meta_path.split('-')[2]=='Gene'?'#80b1d3':'#d6604d')">{{ record.meta_path.split('-')[2] }}</a-tag>-
                  <a-tag :color="record.meta_path.split('-')[4]=='Compound'?'#33a02c':(record.meta_path.split('-')[4]=='Gene'?'#80b1d3':'#d6604d')">{{ record.meta_path.split('-')[4] }}</a-tag>-
                  <a-tag :color="record.meta_path.split('-')[6]=='Compound'?'#33a02c':(record.meta_path.split('-')[6]=='Gene'?'#80b1d3':'#d6604d')">{{ record.meta_path.split('-')[6] }}</a-tag>
                </template>
              </template>
              <template v-if="column.dataIndex == 'path'">
                <template v-for="(item,index) in record.path.split('-')">
                  <template v-if="index % 2 == 0">
                    <template v-if="index < record.path.split('-').length-1">
                      <b>{{item}}</b>-
                    </template>
                    <template v-else>
                      <b>{{item}}</b>
                    </template>
                  </template>
                  <template v-else>
                    <i>{{item}}</i>-
                  </template>
                </template>
              </template>
            </template>
          </a-table>
          <div class="footer">
            <a-row>
              <a-col :span="12" align="left">
                <a-input-search
                    v-model:value="pathdatasource.searchValue"
                    placeholder="input search text"
                    style="width: 200px"
                    @search="Onsearch"
                ></a-input-search>
              </a-col>
              <a-col :span="12" align="left">
                <a-button  @click="exportData">
                  <template #icon>
                    <DownloadOutlined />
                  </template>
                  Download tables
                </a-button>
              </a-col>
            </a-row>
          </div>
        </a-collapse-panel>
        <br>
        <a-collapse-panel
            id="Graph"
            :show-arrow="false"
            style="border:solid black 1px;backgroundColor: #2e75b6"
            key="3">
          <template #header>
            <div class="title">
              <span>Graph</span>
            </div>
          </template>
          <EchartOne v-model:dataSource="state.selectedPathRowKeys"/>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <br>
  </div>

</template>

<script>
import {reactive, computed, ref, watch, toRefs, onMounted ,inject} from "vue";
import EchartOne from "@/components/EchartOne";
import $ from 'jquery'
import {useRoute} from "vue-router";
import axios from "axios";
import {message} from "ant-design-vue";
import { DownloadOutlined } from "@ant-design/icons-vue";
import tsv from 'tsv'
import clipbord from "clipboard"
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Detail",
  components: {EchartOne,DownloadOutlined},
  setup() {
    const route = useRoute()
    let taskid = route.query.taskid
    const param = reactive({
      graphValue:route.query.Knowledge_graph,
      Source_Type:route.query.Source_Type + " / ingredient",
      Target_Type:route.query.Target_Type + " / ingredient",
      Source_Node:route.query.Source_Node,
      Target_Node:route.query.Target_Node
    })
    const path = '/mnt/jingdu/deepnp/app_data/output/'+taskid
    let url = window.location.href
    let link = 'http://point.gene.ac/retrieve/?taskid='+taskid
    const state = reactive({
      selectedMetaRowKeys: [],
      selectedPathRowKeys: [],
      items:[
        {
          key: '1',
          href: '#Task',
          title: 'Task setting',
        },
        {
          key: '2',
          href: '#Metapaths',
          title: 'Meta-paths',
        },
        {
          key: '3',
          href: '#Paths',
          title: 'Paths',
        },
        {
          key: '4',
          href: '#Graph',
          title: 'Graph',
        },
      ]
    });
    const currtent_anchor = (activeLink)=>{
      console.log(activeLink)
      return activeLink
    }
    const show = reactive({
      show1:false,
      show2:true,
      show3:true
    })
    //折叠面板
    const activeKey = ref(['1','4'])
    const metadatasource = reactive({
      data: [],
      showdata: [],
      data2:[],//用于搜索后还原数据
      columns: [
        {
          title: 'Meta-path',
          dataIndex: 'Meta_path',
          resizable: true,
        },
        {
          title: 'Path number',
          dataIndex: 'path_number',
          resizable: true,
          minwidth:30,
          defaultSortOrder: 'dscend',
          sorter:(a,b)=>a.path_number - b.path_number
        }
      ],
      searchValue:"",
      load: true,//加载动画
    })
    const pathdatasource = reactive({
      alldata:[],
      data: [],
      data2:[],
      showdata:[],
      columns: [
        {
          title: 'Meta-path',
          dataIndex: 'meta_path',
          width:400,
          resizable: true,
        },
        {
          title: 'Path',
          dataIndex: 'path',
          resizable: true,
        },
        {
          title: 'Average degree',
          dataIndex: 'PG_score',
          resizable: true,
          sorter:(a,b)=>a.PG_score-b.PG_score
        },
      ],
      searchValue:"",
      load: true
    })
    const rowSelectionMeta = computed(() => {
      return {
        selectedRowKeys: state.selectedMetaRowKeys,
        onChange: (selectedRowKeys) => {
          state.selectedMetaRowKeys = selectedRowKeys;
        },
      };
    })
    const rowSelectionPath = computed(() => {
      return {
        selectedRowKeys: state.selectedPathRowKeys,
        onChange: (selectedRowKeys) => {
          state.selectedPathRowKeys = selectedRowKeys;
        },
      };
    })
    const pagination1 = reactive({
      current: 1,
      pageSize: 5,
      total: metadatasource.data.length,
      defaultPageSize: 5,
      pageSizeOptions: ['5', '10', '20']
    })
    const pagination2 = reactive({
      current: 1,
      pageSize: 5,
      total: pathdatasource.data.length,
      defaultPageSize: 5,
      pageSizeOptions: ['5', '10', '20']
    })
    watch(() => [...state.selectedMetaRowKeys], () => {
      activeKey.value = ['1','4']
      console.log("我检测到数据变化了")
      activeKey.value.push('2')
      activeKey.value.push('3')

      pathdatasource.load=true
      reload_path()
      read2()
    })
    watch(()=>pathdatasource.searchValue,()=>{
      if(pathdatasource.searchValue == ""){
        Onsearch()
      }
    })
    watch(()=>metadatasource.searchValue,()=>{
      if(metadatasource.searchValue == ""){
        Onsearch_metapath()
      }
    })

    function reload_path(){
      pathdatasource.load=true
      pathdatasource.data=[]
      // pathdatasource.load=false
    }
    function exportData(){
      const data = pathdatasource.alldata.map(item =>{
        return{
          meta_path:item.meta_path,
          path:item.path,
          newpath:item.newpath,
          PG_score:item.PG_score
        }
      })
      const tsvData = tsv.stringify(data)
      const blob = new Blob([tsvData], { type: 'text/tsv' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.download = 'path_data.tsv'
      link.href = url
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
    function exportMetaData(){
      const data = metadatasource.data.map(item =>{
        return{
          Meta_path:item.Meta_path,
          path_number:item.path_number,
        }
      })
      const tsvData = tsv.stringify(data)
      const blob = new Blob([tsvData], { type: 'text/tsv' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.download = 'meta_path_data.tsv'
      link.href = url
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
    function Onsearch(){
      let data = pathdatasource.data
      if (pathdatasource.searchValue && pathdatasource.searchValue !==''){
        let x = pathdatasource.data2
        pathdatasource.data = []
        for (const xKey in x) {
            if (x[xKey].path.indexOf(pathdatasource.searchValue)>=0) {
              pathdatasource.data.push(x[xKey])
            }
        }
      }else {
        console.log(data)
        pathdatasource.data=pathdatasource.data2
      }
      pagination2.total = pathdatasource.data.length
      // page2(pagination2.current,pagination2.pageSize)
    }
    function Onsearch_metapath(){
      let data = metadatasource.data
      if (metadatasource.searchValue && metadatasource.searchValue !==''){
        let x = metadatasource.data2
        metadatasource.data = []
        for (const xKey in x) {
            if (x[xKey].Meta_path.indexOf(metadatasource.searchValue)>=0) {
              metadatasource.data.push(x[xKey])
            }
        }

      }else {
        console.log(data)
        metadatasource.data=metadatasource.data2
      }
      pagination1.total = metadatasource.data.length
      // page1(pagination1.current,pagination1.pageSize)
    }
    function changeshow(){
      show.show3=!show.show3
    }
    //分页

    function page1(pagination) {
        pagination1.current = pagination.current;
        pagination1.pageSize = pagination.pageSize;
      // pagination1.current = page;
      // pagination1.pageSize = pageSize;
      // metadatasource.showdata = metadatasource.data.slice((page -1)*pageSize , page*pageSize)
    }
    // function page2(page,pageSize) {
    //   console.log("page2")
    //   pagination2.current = page;
    //   pagination2.pageSize = pageSize;
    //   pathdatasource.showdata = pathdatasource.data.slice((page -1)*pageSize , page*pageSize)
    // }
    function page2(pagination) {
      pagination2.current = pagination.current;
      pagination2.pageSize = pagination.pageSize;
    }

    function getMetalist() {
      axios({
        method: 'get',
        url: '/test/task/' + taskid+'/'
      }).then((res) => {
        console.log(res)
        if (res.data.data.status =="success"){
          show.show1=true
          show.show2=false
          read()
        }else {
          setTimeout(()=>{
            refRoad()
          },2000)
        }
      }).catch((err) => {
        message.error('Request Failed!')
      })
    }
    const targetOffset = ref(undefined);
    onMounted(() => {
      getMetalist()
      targetOffset.value = window.innerHeight / 2 - 100;
    })

    function read() {
      axios({
        method: 'get',
        url:'/test/deepnp/kg/db/'+taskid+'/',
      }).then((res)=>{
        metadatasource.load = true
        console.log(res.data.data)
        let x = res.data.data.meta_data
        metadatasource.data = res.data.data.meta_data
        metadatasource.data2= res.data.data.meta_data
        pathdatasource.alldata = res.data.data.path_data
        pagination1.total = metadatasource.data.length
        // page1(pagination1.current,pagination1.pageSize)
        state.selectedMetaRowKeys=[metadatasource.data[0].Meta_path]
        metadatasource.load = false
      })
      // $.get(path + '/meta_path.tsv', function (x) {
      //   metadatasource.data = []
      //   for (const xKey in x.split("\n")) {
      //     // console.log(x.split("\n")[xKey].split('\t')[1])
      //     metadatasource.data.push({
      //       Meta_path: x.split("\n")[xKey].split('\t')[0],
      //       path_number: x.split("\n")[xKey].split('\t')[1]
      //     })
      //   }
      //   metadatasource.data.shift()
      //   metadatasource.load = false
      // })
    }

    function read2() {
      if(state.selectedMetaRowKeys.length!=0){
        axios({
          method: 'get',
          url:'/test/deepnp/kg/db/'+taskid+'/',
        }).then((res)=>{
          pathdatasource.load = true
          let x = res.data.data.path_data
          pathdatasource.data = []
          pathdatasource.data2= []
          for (const xKey in x) {
            // console.log("xKey",xKey)
            // pathdatasource.data.push({meta_path:x.split("\n")[xKey].split('\t')[0],path:x.split("\n")[xKey].split('\t')[1],PG_score:x.split("\n")[xKey].split('\t')[2]})
            for (let i = 0; i < state.selectedMetaRowKeys.length; i++) {
              if (x[xKey].meta_path == state.selectedMetaRowKeys[i]) {
                pathdatasource.data.push(x[xKey])
                pathdatasource.data2.push(x[xKey])
              }
            }
          }
          state.selectedPathRowKeys=[pathdatasource.data[0].path]
          pathdatasource.load = false
        })
      }else {
        pathdatasource.load = false
      }
      pagination2.total = pathdatasource.data.length
      // page2(pagination2.current,pagination2.pageSize)

      // $.get(path + '/path_data.tsv', function (x) {
      //   pathdatasource.data = []
      //   for (const xKey in x.split('\n')) {
      //     // pathdatasource.data.push({meta_path:x.split("\n")[xKey].split('\t')[0],path:x.split("\n")[xKey].split('\t')[1],PG_score:x.split("\n")[xKey].split('\t')[2]})
      //     for (let i = 0; i < state.selectedMetaRowKeys.length; i++) {
      //       if (x.split('\n')[xKey].split('\t')[0] == state.selectedMetaRowKeys[i]) {
      //         pathdatasource.data.push({
      //           meta_path: x.split("\n")[xKey].split('\t')[0],
      //           path: x.split("\n")[xKey].split('\t')[1],
      //           PG_score: x.split("\n")[xKey].split('\t')[2]
      //         })
      //       }
      //     }
      //   }
      // })

    }
    const reload = inject('reload') //注入刷新事件,这里括号中的参数要对应上前面provide中的第一个参数

    function refRoad(){
        reload()
        console.log('Refresh')
    }

    function start1(){
      metadatasource.load=true
      state.selectedMetaRowKeys=[]
      metadatasource.load=false
    }
    const hasSelected1 = computed(() => state.selectedMetaRowKeys.length > 0);

    function start2(){
      pathdatasource.load=true
      state.selectedPathRowKeys=[]
      pathdatasource.load=false
    }
    const hasSelected2 = computed(() => state.selectedPathRowKeys.length > 0);

    const Copy = ()=>{
      clipbord.copy(taskid)
      message.success("Copy success!")
    }

    return {
      ...toRefs(show),
      metadatasource,
      pathdatasource,
      rowSelectionMeta,
      rowSelectionPath,
      activeKey,
      pagination1,
      pagination2,
      state,
      taskid,
      url,
      link,
      hasSelected1,
      hasSelected2,
      param,
      targetOffset,
      page1,
      page2,
      read2,
      refRoad,
      changeshow,
      Onsearch,
      start1,
      start2,
      Onsearch_metapath,
      exportData,
      Copy,
      currtent_anchor,
      exportMetaData
    }
  }
}
</script>

<style scoped>
.test1{
  position: absolute;
  top: 1px;
  margin-left: -120px;
  font-size:xx-small;
}
.title{
  font-size: 16px;
  text-align: left;
  color: white;
  font-weight: bold;
}
li {
  font:
      1rem 'Fira Sans',
      sans-serif;
}
.affix{
  text-align: left;
  position: absolute;
  top: 11vh;
  right: 1vw;
}
/deep/a{
  text-decoration-line: none;
  font-size: 16px;
}
.footer{
  height: 30px;
  position: relative;
  bottom: 5vh;
}
</style>